<template>

  <div style="padding: 10px">
    <el-row style="padding: 10px">
      <el-col :span="11" style="margin:0 10px">
        <el-card style="width: 600px;height: 420px;">
          <div slot="header" class="clearfix">
            <span>分类数量</span>
          </div>
          <div id="main1" :style="{width:'600px',height:'400px'}"></div>
        </el-card>
      </el-col>
      <el-col :span="11" style="margin:0 10px">
        <el-card style="width: 600px;height: 420px;">
          <div slot="header" class="clearfix">
            <span>每日登录情况</span>
          </div>
          <div id="main4" :style="{width:'600px',height:'400px',}"></div>
        </el-card>
      </el-col>

    </el-row >
    <el-row  style="padding: 10px">
      <el-col :span="11" style="margin:0 10px">
        <el-card style="width: 600px;height: 450px;">
          <div slot="header" class="clearfix">
            <span>分类数量</span>
          </div>
          <div id="main3" :style="{width:'600px',height:'450px',}"></div>
        </el-card>
      </el-col>
      <el-col :span="11" style="margin:0 10px">
        <el-card style="width: 600px;height: 450px;">
          <div slot="header" class="clearfix">
            <span>类别下载数量</span>
          </div>
          <div id="main2" :style="{width:'600px',height:'450px'}"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'

// import request from "@/utils/request";
import axios from "axios";

export default {

  name: "Home",
  data() {
    return {
      option1:{
        xAxis:{
          data: []
        },
        yAxis:{
        },
        tooltip: {
          trigger: 'item'
        },
        series:[
          {
            name: '',
            type: 'bar',
            data: []
          }
        ]
      },
      option2:{
        xAxis:{
          data: []
        },
        yAxis:{
        },
        tooltip: {
          trigger: 'item'
        },
        series:[
          {
            name: '',
            type: 'bar',
            data: []
          }
        ]
      },
      option3:{
        legend: {

          // 图例
          data: [],
          right: "0px",
          top: "5%",
          // orient: "vertical"
        },
        tooltip: {
          trigger: 'item',
          // formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        title: {
          // 设置饼图标题，位置设为顶部居中
          text: "资源管理",

          top: "47%",
          left: "center"
        },
        series: [

          {
            label: {
              show: true,
              formatter: "{b} : {c} ({d}%)" // b代表名称，c代表对应值，d代表百分比
            },

            radius: ["40%", "60%"], //饼图半径
            type: "pie", // type设置为饼图
            data: [
              {
                value: 0,
                name: ""
              },
              {
                value: 0,
                name: ""
              },
              {
                value: 0,
                name: ""
              },
              {
                value: 0,
                name: ""
              },
              {
                value: 0,
                name: ""
              },
              {
                value: 0,
                name: ""
              },
              {
                value: 0,
                name: ""
              },
              {
                value: 0,
                name: ""
              },
              {
                value: 0,
                name: ""
              },
              {
                value: 0,
                name: ""
              },
              {
                value: 0,
                name: ""
              }
            ]
          }
        ]
      },
      option4:{
        xAxis:{
          data: []
        },
        yAxis:{
        },
        tooltip: {
          trigger: 'item'
        },
        series:[
          {
            name: '',
            type: 'line',
            data: []
          }
        ]
      },
    }
  },
  mounted() {
    this.getEchart1();
    this.getEchart2();
    this.getEchart3();
    this.getEchart4();
  },
  methods: {
    //获取option1的柱状图
    getEchart1(){
      let myChart = echarts.init(document.getElementById('main1'))

      window.onresize = function () {//自适应大小
        myChart.resize();
      };
      axios.get("http://36.133.200.169:8088/api/v3/srr/resources/counter").then(response=>{
        for (let i=0;i<response.data.data.length;i++){
          this.option1.xAxis.data[i]=response.data.data[i].categoryName
          this.option1.series[0].data[i]=response.data.data[i].total
        }
        // console.log(this.option1.xAxis.data)
        myChart.setOption(this.option1)
      })
    },
    //获取option2的折线图
    getEchart2(){
      let myChart = echarts.init(document.getElementById('main2'))
      window.onresize = function () {//自适应大小
        myChart.resize();
      };
      axios.get("http://36.133.200.169:8088/api/v3/srr/resources/DownloadCount").then(response=>{
        for (let i=0;i<response.data.data.length;i++){
          this.option2.xAxis.data[i]=response.data.data[i].categoryName
          this.option2.series[0].data[i]=response.data.data[i].total
        }
        // console.log(this.option2.xAxis.data)
        myChart.setOption(this.option2)
      })
    },
    getEchart3(){
      let myChart = echarts.init(document.getElementById('main3'))
      window.onresize = function () {//自适应大小
        myChart.resize();
      };
      axios.get("http://36.133.200.169:8088/api/v3/srr/resources/counter").then(response=>{
        for (let i=0;i<response.data.data.length;i++){
          this.option3.series[0].data[i].value=response.data.data[i].total
          this.option3.series[0].data[i].name=response.data.data[i].categoryName
          this.option3.legend.data[i]=response.data.data[i].categoryName
        }
        // console.log(this.option3.xAxis.data)
        myChart.setOption(this.option3)
      })
    },
    getEchart4(){
      let myChart = echarts.init(document.getElementById('main4'))
      window.onresize = function () {//自适应大小
        myChart.resize();
      };
      axios.get("http://36.133.200.169:8088/api/v3/monitor/log/login/countByDay")
      .then(response=>{
        // console.log(response.data.data)
        for (let i=0;i<response.data.data.length;i++){
          this.option4.xAxis.data[i]=response.data.data[i].dateTime
          console.log(this.option4.xAxis.data[i])
          this.option4.series[0].data[i]=response.data.data[i].dayCount
          console.log(this.option4.series[0].data[i])
        }
        myChart.setOption(this.option4)
      })
    }
  }
}
</script>

<style scoped>
.el-row  .el-card {
  min-width: 100%;
  height: 100%;
  margin-right: 20px;
  transition: all .5s;
}
</style>
